<template>
	<el-container>
		<!-- 顶部 -->
		<el-header style="background:rgb(0,21,41)">
			<Header></Header>
		</el-header>
		<!-- 中间区 -->
		<el-main style="padding:0px">
			<el-container>
				<!-- 左侧导航 -->
				<el-aside width="150px">
					<Sider></Sider>
				</el-aside>

				<!-- 右侧内置展示 -->
				<el-main>
					<component :is="Html"></component>
				</el-main>
			</el-container>
		</el-main>
	</el-container>
</template>

<script>
import Header from './components/Header'
import Sider from './views/Sider'
import Html from './components/Html'
import Home from './views/Home'
import vue from './views/vuedocs/vue'
import zhiLing from '@/components/12-16eleme/views/vuedocs/zhiLing'
import shengming from '@/components/12-16eleme/views/vuedocs/shengming'
export default {
	data() {
		const path = window.location.hash.replace(/\#/, '')
		return {
			Html: path || 'Html',
		}
	},
	components: { Header, Sider, Home, vue, zhiLing ,Html ,shengming},
	mounted() {
		// 页面打开时挂载一个监听hash值变化的函数
		window.onhashchange = () => {
			this.Html = window.location.hash.replace(/\#/, '')
		}
	},
}
</script>
<style>
*{
	margin: 0;
	padding: 0;
}
.el-main{
	padding-top: 0;
}
</style>